import {Component} from '@angular/core';
import {RouterModule} from "@angular/router";
import {CommonModule} from "@angular/common";
import {FocusBlurDirective} from "../focus-blur.directive";
import TestFocusBlurComponent from "./test-focus-blur";

@Component({
    selector: 'app-home',
    standalone: true,
    imports: [
        CommonModule,
        RouterModule,
        TestFocusBlurComponent
        // FocusBlurDirective
    ],
    hostDirectives: [
        {
            directive: FocusBlurDirective,
            inputs: ['focusColor'],
            outputs: ['focusBlurEvent'],
        }
    ],
    template: `
        <div>
            home here!
            <app-test-focus-blur fc="#f60" (fbe)="handleFocusBlur($event)"></app-test-focus-blur>
        </div>
    `,
    styles: []
})
export default class HomeComponent {
    handleFocusBlur(event: string) {
        console.log('handleFocusBlur', event);
    }
}
